<template>
    <view class="headbar">
        <view class="headbar-top">
            <view class="back-info">
                <view class="message-box" @tap="goback">
                    <u-icon name="arrow-left" size="30" color="#ebd093" style="margin-left: -4rpx;"></u-icon>
                </view>
                <view class="user-name-box">
                    <u-icon name="account" color="#bcbcbc" size="28"></u-icon>
                    <text class="user-name-text">{{user_info.user_name}}</text>
                </view>
                <view class="user-amount-box">
                    <u-icon name="rmb-circle-fill" color="#ebd093" size="28" @click="handleRefresh()" ></u-icon>
                    <text class="amount">{{user_info.money_balance}}</text>
					<u-icon class="zhuan" :class="{'user-animation': startAnimation}" style="right: 8rpx; position: absolute;"
					name="reload" color="#bcbcbc"  size="36" @tap="refreshUserInfo()"></u-icon>
                 </view>
            </view>
            <view class="change-btn">
				<image class="headbar-switch" src="/static/img/live/switch.svg" mode="" @tap="showTabs = true"></image>
                <!-- <u-icon name="more-circle" size="48" color="#ebd093" style="margin-right: 20rpx;" @tap="showTabs = true">
                </u-icon> -->
				<image class="headbar-setting" src="/static/img/live/setting.svg" mode="" @tap="showSetting = true" style=""></image>
                <!-- <u-icon name="setting" size="48" color="#fff"  @tap="showSetting = true">
                </u-icon> -->
            </view>
        </view>
        <view class="headbar-bot">
            <view class="tableName">{{table_info.he_guan_name}}</view>
            <view class="limit">{{table_info.xian_hong_he_usd}}</view>
            <view class="onNo">局号：{{table_info.bureau_number}}</view>
        </view>

        <switchTab :showModel="showTabs"></switchTab>
        <setting :showSetting="showSetting"></setting>
    </view>
</template>

<script>
    import user from "@/api/api"
	import gameTable from "@/api/game"
    import switchTab from './switchTable.vue'
    import setting from './settings.vue'
    export default {
        components: {
            switchTab,
            setting
        },
        data() {
            return {
                user_info: {},
                showTabs: false,
                showSetting: false,
				table_info:{},
				gameType:0,
				//刷新动画
				startAnimation: false
            };
        },
		onLoad(option) {
			if(option.type_id == 3 ) {
				this.gameType = 0
			}
			if(option.type_id == 2 ) {
				this.gameType = 1
			}
			
		},
        mounted() {
			let routes = getCurrentPages(); 
			 let curParam = routes[routes.length - 1].options;
            this.userInfos();
			this.getGameTable(curParam.id);
        },
        methods: {
            goback() {
                uni.redirectTo({
                    url: '/pages/index/index?pageNo='+this.gameType
                })
            },
			getGameTable(id){
				gameTable.gameTableInfo({id:id}).then((res) => {
				    if (res.data.code == 200) {
				       this.table_info = res.data.data
				    } else {
				        this.$tip.alert(res.data.message);
				    }
				})
			},
			//点击刷新用户信息
			refreshUserInfo() {
				this.startAnimation = true
				this.userInfos()
				setTimeout(() => {
					this.startAnimation = false
				},1000)
			},
			userInfos() {
			    user.getUserInfo().then((res) => {
			        if (res.data.code == 200) {
			            this.user_info = res.data.data
			        } else {
			            this.$tip.alert(res.data.message);
						uni.removeStorage('account')
						uni.removeStorage('password')
						uni.removeStorage('login_user_info')
						uni.removeStorage('Access-Token')
						uni.redirectTo({
							url:"/pages/login/login"
						})
			        }
					
			    })
			}
        },
    }
</script>

<style lang="scss" scoped>
	.headbar-animation {
		animation: refreshAnimation 1s;
	}
	.user-animation{
		animation: refreshAnimation 1s;
	}
	.zhuan:hover{
		// transform: rotate(90deg);
	}
	@keyframes refreshAnimation
	{
		from {transform:rotate(0deg);}
		to {transform:rotate(360deg);}
	}
    .headbar {
        height: 100rpx;
        background-color: #1d1c21;
		
        .headbar-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64rpx;
            line-height: 64rpx;
            padding: 0 20rpx;

            .back-info {
                display: flex;
                align-items: center;

                .message-box {
                    height: 44rpx;
                    width: 44rpx;
                    border-radius: 50%;
                    line-height: 40rpx;
                    margin-right: 20rpx;
                    border: 2rpx solid #ebd093;
                    text-align: center;
                }

                .user-name-box {
                    width: 208rpx;
                    height: 40rpx;
                    border-radius: 20rpx;
                    border: 2rpx solid #666;
                    padding-left: 8rpx;
                    line-height: 40rpx;
                    display: flex;
                    align-items: center;

                    .user-name-text {
                        color: #bcbcbc;
                        font-size: 24rpx;
                        margin-left: 4rpx;
                    }
                }

                .user-amount-box {
                    width: 228rpx;
                    height: 40rpx;
                    margin-left: 12rpx;
                    border-radius: 20rpx;
                    border: 2rpx solid #666;
                    margin-top: 4rpx;
                    padding-left: 8rpx;
                    line-height: 40rpx;
                    display: flex;
                    align-items: center;
					position: relative;

                    .amount {
                        margin-left: 4rpx;
                        margin-right: 20rpx;
                        color: #ebd093;
                        font-size: 24rpx;
                    }
                }

            }

            .change-btn {
                display: flex;
                align-items: center;
            }
        }
		.headbar-switch{
			width: 40rpx;
			margin-right: 10rpx;
		}
		.headbar-setting{
			height: 22px;
			width: 22px;
			margin-left: 8px;
		}


        .headbar-bot {
            padding-left: 32rpx;
            color: #FFFFFF;
            display: flex;

            .tableName {
                font-size: 24rpx;
                transform: scale(.8);
                transform-origin: 0 0;
            }

            .limit {
                transform: scale(.8);
                transform-origin: 0 0;
            }

            .onNo {
                transform: scale(.8);
                transform-origin: 0 0;
            }
        }

    }
</style>